<template>
  <dv-border-box-8 class="summary-panel">
    <div class="panel-header">
      <i class="el-icon-data-line"></i>
      生产状态汇总
    </div>
    
    <div class="summary-content">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, index) in summaryItems" :key="index">
          <div class="summary-card" :class="`type-${index+1}`">
            <div class="card-icon">
              <i :class="item.icon"></i>
            </div>
            <div class="card-info">
              <div class="card-value">{{ item.value }}</div>
              <div class="card-title">{{ item.title }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
      
     
    </div>
    <div class="progress-container">
        <div class="progress-header">
          <span>计划完成率</span>
          <span>{{ productionData.completionRate }}%</span>
        </div>
        <el-progress 
          :percentage="productionData.completionRate" 
          :stroke-width="15" 
          :show-text="false" 
          :color="progressColor">
        </el-progress>
        <div class="progress-detail">
          <span>目标: {{ productionData.planCount }}</span>
          <span>已完成: {{ productionData.completedCount }}</span>
        </div>
      </div>
  </dv-border-box-8>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  productionData: {
    type: Object,
    required: true
  }
})

// 汇总数据项
const summaryItems = computed(() => [
  {
    title: '计划产量',
    value: props.productionData.planCount,
    icon: 'el-icon-aim'
  },
  {
    title: '已完成产量',
    value: props.productionData.completedCount,
    icon: 'el-icon-finished'
  },
  {
    title: '进行中订单',
    value: props.productionData.ongoingOrders,
    icon: 'el-icon-loading'
  },
  {
    title: '延迟订单',
    value: props.productionData.delayedOrders,
    icon: 'el-icon-warning'
  }
])

// 进度条颜色
const progressColor = computed(() => {
  const rate = props.productionData.completionRate
  if (rate < 50) return '#f56c6c'
  if (rate < 80) return '#e6a23c'
  return '#67c23a'
})
</script>

<style scoped>
.summary-panel {
  width: 100%;
  height: 250px;
  position: relative;
  padding: 15px;
}

.panel-header {
  font-size: 16px;
  color: #29b6ff;
  margin-bottom: 15px;
}

.summary-content {
  height: calc(100% - 30px);
  display: flex;
  flex-direction: column;
}

.summary-card {
  background-color: rgba(24, 44, 78, 0.5);
  border-radius: 4px;
  padding: 15px;
  display: flex;
  align-items: center;
  height: 90px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-left: 3px solid;
}

.type-1 { border-left-color: #67c23a; }
.type-2 { border-left-color: #409eff; }
.type-3 { border-left-color: #e6a23c; }
.type-4 { border-left-color: #f56c6c; }

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(41, 182, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  margin-right: 15px;
}

.type-1 .card-icon { background-color: rgba(103, 194, 58, 0.1); color: #67c23a; }
.type-2 .card-icon { background-color: rgba(64, 158, 255, 0.1); color: #409eff; }
.type-3 .card-icon { background-color: rgba(230, 162, 60, 0.1); color: #e6a23c; }
.type-4 .card-icon { background-color: rgba(245, 108, 108, 0.1); color: #f56c6c; }

.card-info {
  flex: 1;
}

.card-value {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 5px;
}

.card-title {
  font-size: 14px;
  color: #b9e0ff;
}

.progress-container {
  margin-top: 20px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  color: #fff;
}

.progress-detail {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  color: #b9e0ff;
  font-size: 12px;
}

:deep(.el-progress-bar__outer) {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-progress-bar__inner) {
  border-radius: 10px;
  transition: all 0.6s ease;
}
</style> 